<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>示例</title>

    <script src="https://balkan.app/js/FamilyTree.js"></script>
    <style>
        /* 设置树的高度和宽度 */
        #tree {
            width: 100%;
            height: 600px;
        }
    </style>
</head>
<body>

<h1>示例</h1>
<div id="tree"></div>

<script>
    // JavaScript

    FamilyTree.templates.sriniz = Object.assign({}, FamilyTree.templates.base);
    FamilyTree.templates.sriniz.size = [225, 90];
    FamilyTree.templates.sriniz.node = '<rect x="0" y="0" height="90" width="225" stroke-width="1" rx="15" ry="15"></rect>';

    FamilyTree.templates.sriniz.defs = `
        <g transform="matrix(0.05,0,0,0.05,-13 ,-12)" id="heart">
            <path d="M448,256c0-106-86-192-192-192S64,150,64,256s86,192,192,192S448,362,448,256Z" style="fill:#fff;stroke:red;stroke-miterlimit:10;stroke-width:24px" fill="red"></path>
            <path d="M256,360a16,16,0,0,1-9-2.78c-39.3-26.68-56.32-45-65.7-56.41-20-24.37-29.58-49.4-29.3-76.5.31-31.06,25.22-56.33,55.53-56.33,20.4,0,35,10.63,44.1,20.41a6,6,0,0,0,8.72,0c9.11-9.78,23.7-20.41,44.1-20.41,30.31,0,55.22,25.27,55.53,56.33.28,27.1-9.31,52.13-29.3,76.5-9.38,11.44-26.4,29.73-65.7,56.41A16,16,0,0,1,256,360Z" fill="red"></path>
        </g>
        <g id="sriniz_male_up">
            <circle cx="15" cy="15" r="10" fill="#fff" stroke="#fff" stroke-width="1"></circle>
            ${FamilyTree.icon.ft(15, 15, '#039BE5', 7.5, 7.5)}
        </g>
        <g id="sriniz_female_up">
            <circle cx="15" cy="15" r="10" fill="#fff" stroke="#fff" stroke-width="1"></circle>
            ${FamilyTree.icon.ft(15, 15, '#FF46A3', 7.5, 7.5)}
        </g>`;

    // Function to create male and female templates
    function createGenderTemplate(gender, color) {
        const template = Object.assign({}, FamilyTree.templates.sriniz);
        template.node = `<rect x="0" y="0" height="{h}" width="{w}" stroke-width="1" fill="${color}" stroke="#aeaeae" rx="15" ry="15"></rect>`;
        template.field_0 = '<text style="font-size: 16px; font-weight: bold;" fill="#ffffff" x="100" y="30">{val}</text>';
        template.field_1 = '<text style="font-size: 12px; font-weight: bold;" fill="#ffffff" x="100" y="50">{val}</text>';
        return template;
    }

    FamilyTree.templates.sriniz_male = createGenderTemplate('male', '#039BE5');
    FamilyTree.templates.sriniz_female = createGenderTemplate('female', '#FF46A3');

    const expandIcon = (color) =>
        `<circle cx="97" cy="-16" r="10" fill="${color}" stroke="#fff" stroke-width="1"><title>Expand</title></circle>
         <line x1="90" y1="-16" x2="104" y2="-16" stroke-width="1" stroke="#fff"></line>
         <line x1="97" y1="-23" x2="97" y2="-9" stroke-width="1" stroke="#fff"></line>`;

    FamilyTree.templates.sriniz_male.plus = expandIcon('#039BE5');
    FamilyTree.templates.sriniz_female.plus = expandIcon('#FF46A3');

    const imgTemplate =
        `<clipPath id="ulaImg">
            <rect height="75" width="75" x="7" y="7" stroke-width="1" fill="#FF46A3" stroke="#aeaeae" rx="15" ry="15"></rect>
        </clipPath>
        <image x="7" y="7" preserveAspectRatio="xMidYMid slice" clip-path="url(#ulaImg)" xlink:href="{val}" width="75" height="75"></image>`;

    FamilyTree.templates.sriniz_male.img_0 = imgTemplate;
    FamilyTree.templates.sriniz_female.img_0 = imgTemplate;

    FamilyTree.templates.sriniz_male.up = '<use x="195" y="0" xlink:href="#sriniz_male_up"></use>';
    FamilyTree.templates.sriniz_female.up = '<use x="195" y="0" xlink:href="#sriniz_female_up"></use>';

    FamilyTree.templates.sriniz.pointer = `
        <g data-pointer="pointer" transform="matrix(0,0,0,0,80,80)">
            <g transform="matrix(0.3,0,0,0.3,-17,-17)">
                <polygon fill="#039BE5" points="53.004,173.004 53.004,66.996 0,120" />
                <polygon fill="#039BE5" points="186.996,66.996 186.996,173.004 240,120" />
                <polygon fill="#FF46A3" points="66.996,53.004 173.004,53.004 120,0" />
                <polygon fill="#FF46A3" points="120,240 173.004,186.996 66.996,186.996" />
                <circle fill="red" cx="120" cy="120" r="30" />
            </g>
        </g>`;

    const familyData = [
        { id: 1, mid: 6, fid: "a5", pids: [2], name: "我", gender: "male", photo: "2.png" },
        { id: 2, pids: [1], mid: 8, fid: 7, name: "李", gender: "female", photo: "2.png" },
        { id: 3, mid: 1, fid: 2, name: "7", gender: "female", photo: "2.png" },
        { id: 4, mid: 1, fid: 2, name: "9", gender: "male", photo: "2.png" },
        { id: "a4", pids: [11], mid: 10, fid: 9, name: "青", gender: "male", photo: "2.png" },
        { id: "a5", pids: [6], mid: 10, fid: 9, name: "康", gender: "male", photo: "2.png" },
        { id: "a6", pids: [12], mid: 10, fid: 9, name: "健", gender: "male", photo: "2.png" },
        { id: "a7", pids: [13], mid: 10, fid: 9, name: "伟", gender: "male", photo: "2.png" },
        { id: "a8", pids: [14], mid: 10, fid: 9, name: "合", gender: "male", photo: "2.png" },
        { id: "a9", pids: [15], mid: 10, fid: 9, name: "理", gender: "male", photo: "2.png" },
        { id: 11, pids: ["a4"], name: "1", gender: "female", photo: "2.png" },
        { id: 6, pids: ["a5"], name: "1", gender: "female", photo: "2.png" },
        { id: 12, pids: ["a6"], name: "1", gender: "female", photo: "2.png" },
        { id: 13, pids: ["a7"], name: "1", gender: "female", photo: "2.png" },
        { id: 14, pids: ["a8"], name: "1", gender: "female", photo: "2.png" },
        { id: 15, pids: ["a9"], name: "1", gender: "female", photo: "2.png" },
        { id: 7, pids: [8], name: "1", gender: "male", photo: "2.png" },
        { id: 8, pids: [7], name: "母", gender: "female", photo: "2.png" },
        { id: 9, pids: [10], name: "爷", gender: "male", photo: "2.png" },
        { id: 10, pids: [9], name: "奶", gender: "female", photo: "2.png" },
        { id: 16, mid: 11, fid: "a4", pids: [17], name: "1", gender: "male", photo: "2.png" },
        { id: 17, pids: [16], name: "1", gender: "male", photo: "2.png" },
        { id: 18, mid: 11, fid: "a4", pids: [19], name: "1", gender: "male", photo: "2.png" },
        { id: 19, pids: [18], name: "1", gender: "male", photo: "2.png" },
        { id: 20, mid: 12, fid: "a6", pids: [21], name: "1", gender: "male", photo: "2.png" },
        { id: 21, pids: [20], name: "1", gender: "male", photo: "2.png" },
        { id: 22, mid: 12, fid: "a6", pids: [23], name: "1", gender: "male", photo: "2.png" },
        { id: 23, pids: [22], name: "无", gender: "male", photo: "2.png" },
        { id: 24, mid: 13, fid: "a7", pids: [25], name: "1", gender: "male", photo: "2.png" },
        { id: 25, pids: [24], name: "无", gender: "male", photo: "2.png" },
        { id: 26, mid: 13, fid: "a7", pids: [27], name: "1", gender: "male", photo: "2.png" },
        { id: 27, pids: [26], name: "无", gender: "male", photo: "2.png" },
        // 省略其他节点以保持简洁
    ];

    const family = new FamilyTree(document.getElementById("tree"), {
        mouseScrool: FamilyTree.action.ctrlZoom,
        template: 'sriniz',
        enableSearch: true,
        nodeMouseClick: FamilyTree.action.none,
        scaleInitial: FamilyTree.match.boundary,
        scaleMax: 1.5,
        nodeBinding: {
            field_0: "name",
            img_0: "photo"
        },
        toolbar: {
            fullScreen: true,
            zoom: true,
            fit: true,
            expandAll: true,
        },
        nodes: familyData
    });

    family.on('render-link', function (sender, args) {
        if (args.cnode.ppid != undefined)
            args.html += `<use data-ctrl-ec-id="${args.node.id}" xlink:href="#heart" x="${args.p.xa}" y="${args.p.ya}"/>`;
        if (args.cnode.isPartner && args.node.partnerSeparation == 30)
            args.html += `<use data-ctrl-ec-id="${args.node.id}" xlink:href="#heart" x="${args.p.xb}" y="${args.p.yb}"/>`;
    });
</script>

</body>
</html>